<template>
  <a-modal
    v-model="show"
    title="上传文件"
    :maskClosable="false"
    @cancel="onCancel"
  >
    <a-upload
      name="file"
      :multiple="true"
      :headers="headers"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :remove="removeFun"
      accept=".xlsx,.xls"
    >
      <a-button :disabled="fileList.length != 0">
        <a-icon type="upload" />
        上传Excel文件
      </a-button>
    </a-upload>
    <template slot="footer">
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button
        key="submit"
        :disabled="fileList.length == 0"
        type="primary"
        :loading="onLoading"
        @click="onSubmit"
        >提交</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import { importRoute } from "@/api/router-manage/index";
export default {
  props: ["show"],
  data() {
    return {
      onLoading: false, //提交按钮loading
      headers: {
        authorization: "authorization-text",
      }, //上传文件头部
      fileList: [], //文件列表
    };
  },
  methods: {
    /* 关闭弹窗 */
    onCancel() {
      this.fileList = [];
      this.$emit("update:show", false);
    },
    /* 提交文件 */
    async onSubmit() {
      this.onLoading = true;
      var formData = new FormData();
      formData.append("File", this.fileList[0]);
      formData.append("FileType", "2");
      let res = await importRoute(formData);
      if (res.Success) {
        this.$message.success("上传成功");
      } else {
        this.$message.error(res.Message);
      }
      this.onCancel();
      this.onLoading = false;
      this.$emit("upList");
    },
    /* 限制上传文件格式 */
    beforeUpload(file) {
      return new Promise(async (resolve, reject) => {
        const arr = file.name.split(".");
        //限定只能取.xlxs || xls格式文件
        if (
          (arr[arr.length - 1] !== "xlsx" || arr[arr.length - 1] === "xls") &&
          (arr[arr.length - 1] === "xsls" || arr[arr.length - 1] !== "xls")
        ) {
          this.$message.warning("请上传Excel文件");
          return;
        }
        this.fileList = [...this.fileList, file];
        const formData = new FormData();
        formData.append("File", this.fileList[0]);
        this.formData = formData;
        return reject(false); //加上这个就会阻止默认上传
      });
    },
    /* 导入文件的删除 */
    removeFun() {
      this.fileList = [];
    },
  },
};
</script>

<style></style>